<template>
  <div>
    <button @click="clickHadler">显示/隐藏</button>
    <div>
      <transition
       @before-enter="beforeEnter"
       @enter="enter"
       @after-enter="afterEnter"
       @before-leave="beforeLeave"
       @leave="leave"
       @after-leave="afterLeave">
       <div v-if="show" class="block">hello wolrd</div>
    </transition>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello',
      show: true
    }
  },
  methods: {
    clickHadler () {
      this.show = !this.show
    },
    beforeEnter () {
      console.log('before-enter')
    },
    enter () {
      console.log('enter')
    },
    afterEnter () {
      console.log('after-Enter')
    },
    beforeLeave () {
      console.log('beforeLeave')
    },
    leave () {
      console.log('leave')
    },
    afterLeave () {
      console.log('afterLeave')
    }

  }
}
</script>
<style scoped>

/* .why-enter-active {
  animation: backInDown 1s ease;
}
.why-leave-active {
  animation: backInDown 1s ease reverse;
} */
.block {
  display: inline-block;
}
</style>
